<template>
  <div id="mybankSet">
      <!-- /.u-menu -->

    <el-container>
      <ul class="u-tab clearfix"><li val="invest_loan_box" class="current"><a>银行卡管理</a></li></ul>
      <div v-for="(userbank,index) in userbank">
        <div  style="margin-top: 50px;width: 220px " >
          <div class="bank-list" style="height: 160px">
            <span class="bank-name">{{userbank.bankName}}</span>
            <br>
            <img  style="width: 166px;height: 100px" :src="require(`../../assets/usercss/bank/${userbank.bankName}.png`)"><br>
            <div class="bank-number" >{{userbank.bankCard.substring(0,4)}} •••• •••• •••• {{userbank.bankCard.substring(5,9)}}</div>
          </div>
          <div style="margin: 10px;text-align: center">
            <el-button type="primary" icon="el-icon-delete" plain></el-button>
          </div>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>

    export default {
        name: "mybankSet",
        data(){
          return{
            userbank:[],
          }
        },
        created() {
          this.axios.get("/api/userbank/allmybank")
            .then((data)=>{
              this.userbank=data.data
            })
        }

    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';
  .bank-list{
    height: 180px;
    padding-top: 15px;
    padding-left: 20px;
    border-radius: 10px;
    background-color: white;
    box-shadow: #c2c2c2 2px 3px 7px;
    transition: all 0.3s;
  }
  .bank-list:hover{
    margin-top: -10px;
    margin-left: -5px;
    height: 160px;
    box-shadow: #b4b4b4 3px 7px 12px 3px;
  }
  .bank-name{
    font-weight: bold;
    font-size: 16px;
    transition: font-size 0.5s;
  }
  .bank-number{
    font-weight: bold;
    font-size: 16px;
  }
  .bank-del{
    margin-top: -10px;
    padding: 10px 0px 10px 10px;
    float: right;
    cursor: pointer;
  }
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 18px;
    color: #F44336;
    margin-right: 15px;
  }
</style>
